<template>
<div class="main">
<el-row>
  <el-col :span="17" style="margin-top:20px">
    <el-card>
      <el-row>
        <el-col :span="4">
            <el-avatar
            :size="100"
            icon="el-icon-picture-outline-round"
            :fit="none"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar[0].FileName">
            </el-avatar>
        </el-col>
        <el-col class="speech" :span="18">
          『{{$store.state.userInfo.NickName || '9527'}}』 欢迎登录
          <br/>
          <span class="say-hi">美好的一天从这里开始.</span>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="matter">
      <el-row>
        <el-divider content-position="left">待办事项</el-divider>
        <el-col :span="5">
            <el-avatar
            icon="el-icon-picture-outline-round"
            :size="100"
            :fit="cover"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar.FileName">
            </el-avatar>
        </el-col>
        <el-col :span="5">
            <el-avatar
            icon="el-icon-picture-outline-round"
            :size="100"
            :fit="cover"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar.FileName">
            </el-avatar>
        </el-col>
        <el-col :span="5">
            <el-avatar
            icon="el-icon-picture-outline-round"
            :size="100"
            :fit="cover"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar.FileName">
            </el-avatar>
        </el-col>
        <el-col :span="5">
            <el-avatar
            icon="el-icon-picture-outline-round"
            :size="100"
            :fit="cover"
            :src="BASE_IMAGE_URL + $store.state.userInfo.Avatar.FileName">
            </el-avatar>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="matter">
      <el-divider content-position="left">项目描述</el-divider>
    </el-card>
  </el-col>
  <el-col :span="6">
    <!-- <el-card class="el-card-adverts" :body-style="{ padding: '0px' ,height:'100%' }"> -->
      <el-row>
        <el-col :span="24">
          <el-image
          class="adverts-image"
          :src="BASE_IMAGE_URL + '/static/images/public/20210120161232.jpg'"
          :fit="cover"></el-image>
        </el-col>
        <el-col :span="24">
          <el-card>
            <el-divider  style="font-size:20px" content-position="left">技能</el-divider>
            <el-form ref="form" label-width="40px">
              <el-form-item label="Go">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="65" :style="{'padding-top':'7px'}"></el-progress>
              </el-form-item>
              <el-form-item label="Vue">
                <el-progress :text-inside="true" :stroke-width="24" :percentage="75"  :style="{'padding-top':'7px'}" status="success"></el-progress>
              </el-form-item>
              <el-form-item label="PHP">
                <el-progress :text-inside="true" :stroke-width="22" :percentage="85"  :style="{'padding-top':'7px'}" status="warning"></el-progress>
              </el-form-item>
              <el-form-item label="Java">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50"  :style="{'padding-top':'7px'}" status="exception"></el-progress>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="24" style="border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="一致性 Consistency" name="1">
              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
              <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            </el-collapse-item>
            <el-collapse-item title="反馈 Feedback" name="2">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="效率 Efficiency" name="3">
              <div>简化流程：设计简洁直观的操作流程；</div>
              <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
              <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
            </el-collapse-item>
            <el-collapse-item title="可控 Controllability" name="4">
              <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
              <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    <!-- </el-card> -->
  </el-col>
</el-row>
</div>
</template>

<script>
import { BASE_IMAGE_URL } from '@/utils/config';
export default {
  name: 'Home',
  setup() {
    return {
      BASE_IMAGE_URL
    }
  }
};
</script>
<style lang="scss" scoped>
.main{
  width: 100%;
  display: block;
}
.el-avatar{
  margin-right: 4px;
  background-color: #ffffff;
  color: #616266;
  font-size: 100px;
}
.el-col{
  margin: 10px;
}
.el-collapse{
  padding:10px;
  background-color: #fff;
}
.matter{
  margin-top: 40px;
}
.speech{
  margin-left: 0;
  padding-top: 20px;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
}
.say-hi{
  font-size: 12px;
  color: rgb(136, 136, 136);
}
.adverts{

}
.adverts-image{
  width: 100%;
  height: 110px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
